<template>
  <AtModal
    class="custom-confirm"
    :is-opened="showModal"
    :close-on-click-overlay="false"
  >
    <AtModalContent>
      {{ content }}
    </AtModalContent>
    <AtModalAction>
      <view
        class="modal-footer"
        @tap="handleOperate"
      >
        <view data-key="cancel">
          {{ cancelText }}
        </view>
        <view data-key="confirm">
          {{ confirmText }}
        </view>
      </view>
    </AtModalAction>
  </AtModal>
</template>

<script>
import { AtModal, AtModalAction, AtModalContent } from "taro-ui-vue";
export default {
  name: "ClockConfirm",
  components: {
    AtModal,
    AtModalAction,
    AtModalContent
  },
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    content:{
      type: String,
      default: '邀请好友组团打卡，立享更多奖励！'
    },
    cancelText:{
      type: String,
      default: '不用了'
    },
    confirmText:{
      type: String,
      default: '去组团'
    }
  },
  methods:{
    handleOperate({ target: { dataset } }) {
      const { key } = dataset;
      if (key === "cancel") {
        this.$emit('cancel')
      }
      if (key === "confirm") {
        this.$emit('confirm')
      }
    },
  }
};
</script>

<style></style>
